<template>
    <div class="dialog-wrap">
      <div class="dialog-cover" v-if="isShow" @click="close"></div>
      <transition name="drop">
        <div class="dialog-content" v-if="isShow">
          <p class="dialog-header">
            <span class="dialog-header-title">{{dialogTitle}}</span>
            <span class="dialog-close-text" @click="close">x</span>
          </p>
          <div class="slot-content">
            <slot></slot>
          </div>
        </div>
      </transition>
    </div>
</template>
<script>
  export default{
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      dialogTitle: {
        type: String,
        default: ''
      }
    },
    methods: {
      close () {
        this.$emit('on-close');
      }
    }
  };
</script>
<style scoped>
  .dialog-wrap{
  }
  .dialog-wrap>
  .dialog-cover{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-color: rgba(0, 0, 0, 1);*/
    background-color: rgba(0, 0, 0, .3);
    /*opacity: 0.3;*/
  }
  .dialog-wrap>
  .dialog-content{
    position: fixed;
    display: block;
    top: 20%;
    left: 50%;
    /*transform: translateX(-50%);*/
    box-sizing: border-box;
    width: 700px;
    max-height: 50%;
    /*margin百分比，是相对于父元素的宽度，margin-top,margin-bottom也是相对于父元素宽度 */
    /*margin-left: 25%;*/
    margin-left: -350px;
    /*border: 2px solid rgba(70, 64, 104, 1);*/
    overflow: auto;
    box-shadow: 0 0 1px 4px lightblue;
    background-color: rgba(255, 255, 255, 1);
  }
  .dialog-wrap>
  .dialog-content>
  .dialog-header{
    height: 30px;
    overflow: hidden;
    border-bottom: 1px solid lightgray;
    text-align: left;
    line-height: 30px;
    background-color: lightblue;
  }

  .dialog-wrap>
  .dialog-content>
  .dialog-header>
  .dialog-header-title{
    margin-left: 10px;
    user-select: none;
  }

  .dialog-wrap>
  .dialog-content>
  .dialog-header>
  .dialog-close-text{
    float: right;
    display: inline-block;
    width: 30px;
    height: 30px;
    /*margin-top: 5px;*/
    text-align: center;
    cursor: pointer;
    user-select: none;
  }

  .dialog-wrap>
  .dialog-content>
  .dialog-header>
  .dialog-close-text:hover{
    background-color: lightgray;
  }

  .dialog-wrap>
  .dialog-content>
  .slot-content{
    padding: 10px;
    text-align: left;
    line-height: 20px;
  }

  .drop-enter{
    transform: translateY(-500px);
  }
  .drop-enter-active{
    transition: all .5s ease;
  }

  .drop-leave-active{
    transition: all .5s ease;
    transform: translateY(-500px);
  }
</style>
